import React, { Component }from 'react';
import { Icon, Row, Col } from 'antd';
import './index.less';

class CustomDatePicker extends Component {

  constructor(props) {
    super(props);
  }

  nowDate = new Date()

  currentDate = {
    year: this.nowDate.getFullYear(),
    month: this.nowDate.getMonth() + 1, // 注意这里
    day: this.nowDate.getDay(),
    date: this.nowDate.getDate(),
    hour: this.nowDate.getHours(),
    minute: this.nowDate.getMinutes()
  }

  state = {
    focusDate: {
      year: this.currentDate.year,
      month: this.currentDate.month,
    },
    slectedDate: {
      year: null,
      month: null,
      day: null,
    },
  }

  handleClick = (year, month, day) => {
    this.setState({
      slectedDate: {
        year,
        month,
        day,
      }
    }, () => {
      console.log(year, month, day);
    });
  }

  getMonthDays = (currentDay) => {
    const { weekType='china' } = this.props;
    const { year, month, date } = this.currentDate;
    const { year: selectedYear, month: selectedMonth, day: selectedDay } = this.state.slectedDate;
    const { year: focusYear, month: focusMonth } = this.state.focusDate;
    // 当前月第一天星期
    const thismonthFirstDay = new Date(focusYear, focusMonth - 1, 1).getDay();
    // 当前月天数
    let nextMonth = focusMonth;
    let nextYear = focusYear;
    if (++nextMonth === 13) {
      nextMonth = 1;
      nextYear++;
    }
    const monthDayNum = new Date(nextYear, nextMonth - 1, 0).getDate();
    // 当前上个月天数
    const preDate = new Date(focusYear, focusMonth - 1, 0);
    const prevMonthDayNum = preDate.getDate();
    let preShowDayNum = weekType === 'china' ? thismonthFirstDay - 1 : thismonthFirstDay;
    const preYear = preDate.getFullYear();
    const prevMonth = preDate.getMonth()+1;
    let prevMonthDays = [];
    let currentMonthDays = [];
    let nextMonthDays = [];
    for (let i = preShowDayNum-1; i >= 0; i--) {
      prevMonthDays.push({
        title: prevMonthDayNum - i,
        className: 'unfocus date_cels',
        year: preYear,
        month: prevMonth,
        day: prevMonthDayNum - i,
      });
    }

    for (let j = 1; j <= monthDayNum ; j++) {
      let className = 'date_cels';
      if (focusYear === year && month === focusMonth && date === j) {
        className = 'date_cels today';
      }
      if (selectedYear === focusYear && selectedMonth === focusMonth && selectedDay === j) {
        className = 'date_cels selected';
      }
      currentMonthDays.push({
        title: j,
        className,
        year: focusYear,
        month: focusMonth,
        day: j,
      });
    }

    if (preShowDayNum < 0) {
      preShowDayNum = 0;
    }

    for (let k=1; k <= (42 - monthDayNum - preShowDayNum) ; k++) {
      nextMonthDays.push({
        title: k,
        className: 'unfocus date_cels',
        year: nextYear,
        month: nextMonth,
        day: k,
      });
    }

    return prevMonthDays.concat(currentMonthDays).concat(nextMonthDays);
  }

  renderDate = () => {
    const { getMonthDays } = this;
    let dates = getMonthDays();
    let trs = [];
    let len = dates.length;
    for (let i = 0; i < len; ) {
      let tds = [];
      for (let j = 0; j < 7; j++) {
        let item = dates[i+j];
        tds.push((
          <td key={i+j} onClick={() => {
            this.handleClick(item.year, item.month, item.day);
          }}>
            <div className={item.className}>{item.title}</div>
          </td>
        ));
      }
      trs.push((
        <tr key={i}>
          {tds}
        </tr>
      ));
      i += 7;
    }
    return (<tbody>
      {trs}
    </tbody>);
  }

  getYearWeek = (year, month, day) => {
    var date1 = new Date(year, parseInt(month) - 1, day), date2 = new Date(year, 0, 1),
    d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
    return Math.ceil( (d + ((date2.getDay() + 1) - 1)) / 7 );
  }

  preYear = () => {
    const { year, month } = this.state.focusDate;
    this.setState({
      focusDate: { year: year - 1, month, }
    });
  }
  nextYear = () => {
    const { year, month } = this.state.focusDate;
    this.setState({
      focusDate: {
        year: year + 1,
        month,
      }
    });
  }
  preMonth = () => {
    const { month, year } = this.state.focusDate;
    let currentYear = year;
    let currentMonth = month;
    if (--currentMonth === 0) {
      currentYear = year - 1;
      currentMonth = 12;
    }
    this.setState({
      focusDate: {
        year: currentYear,
        month: currentMonth
      },
    });

  }
  nextMonth = () => {
    const { month, year } = this.state.focusDate;
    let currentYear = year;
    let currentMonth = month;
    if (++currentMonth === 13) {
      currentYear = year + 1;
      currentMonth = 1;
    }
    this.setState({
      focusDate: {
        year: currentYear,
        month: currentMonth
      },
    });
  }

  getThead = (type) => {
    const components= {
      west: (
        <tr>
          <th>周日</th>
          <th>周一</th>
          <th>周二</th>
          <th>周三</th>
          <th>周四</th>
          <th>周五</th>
          <th>周六</th>
        </tr>
      ),
      china: (
        <tr>
          <td>周一</td>
          <td>周二</td>
          <td>周三</td>
          <td>周四</td>
          <td>周五</td>
          <td>周六</td>
          <td>周日</td>
        </tr>
      )
    };
    return components[type];
  }

  render() {
    const { year, month } = this.state.focusDate;
    const { weekType='china' } = this.props;
    return (
      <div className="custom_datepicker_wrapper">
        <div className="date_toolbar">
          <Row>
            <Col span={4}>
              <Icon type="double-left" className="date_opt" onClick={this.preYear} />
              <Icon type="left" className="date_opt" onClick={this.preMonth} />
            </Col>
            <Col span={16}>
              <span className="date_year">{year}</span>
              <span className="date_month">{month.toString().length === 1 ? '0' + month : month}</span>
            </Col>
            <Col span={4}>
              <Icon type="right" className="date_opt" onClick={this.nextMonth} />
              <Icon type="double-right" className="date_opt" onClick={this.nextYear} />
            </Col>
          </Row>
        </div>
        <div className="date_content">
          <table style={{width: '100%'}}>
            <thead>
              {this.getThead(weekType)}
            </thead>
            {this.renderDate()}
          </table>
        </div>
        <div className="date_extra"></div>
      </div>
    );
  }
}

export default CustomDatePicker;